<template>
  <div style="margin:50px 0">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div class="title" v-show="searchTextFlag">
      <div class="search">搜索历史</div>
      <div class="delect">
        <van-icon name="delete" @click="delSerachText" />
      </div>
    </div>
    <van-row v-show="!searchTextFlag">
      <van-swipe-cell v-for="item in searchList" :key="item.id">
        <van-cell :border="false" :title="item.name" :value="'商品上架时间：'+item.ctime.substring(0,10)" />
        <template #right>
          <van-button square type="danger" text="删除" @click="delectShop(item.id)" />
        </template>
      </van-swipe-cell>
    </van-row>
    <van-row v-show="searchTextFlag">
      <van-tag v-for="(item,index) in HistoryList" :key="index" @click="searchClick(item)">{{item}}</van-tag>
    </van-row>
    <van-divider v-show="HistoryList.length==0">暂无搜索历史</van-divider>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      HistoryList: [],
      serchFlag: false,
      searchTextFlag: true,
      searchList: []
    };
  },
  methods: {
    onCancel() {
      this.searchTextFlag = true;
      this.value = "";
      this.searchList = [];
    },
    async onSearch() {
      if (this.value.trim().length == 0) return this.$toast("输入搜索内容");
      const { data: res } = await this.$http.get(`api/getprodlist`);
      this.searchList = res.message;
      // console.log(this.searchList);
      this.serchFlag = true;
      this.searchTextFlag = false;
      let index = this.HistoryList.findIndex(item => {
        return item == this.value;
      });
      if (index == "-1") {
        this.HistoryList.push(this.value);
        window.sessionStorage.setItem("SearchText", this.HistoryList);
      }
    },
    getSearchText() {
      window.sessionStorage.getItem("SearchText")
        ? (this.HistoryList = window.sessionStorage
            .getItem("SearchText")
            .split(","))
        : (this.HistoryList = []);
    },
    delSerachText() {
      window.sessionStorage.setItem("SearchText", "");
      this.HistoryList = [];
    },
    delectShop(id) {
      this.$dialog
        .confirm({
          title: "标题",
          message: "弹窗内容"
        })
        .then(async () => {
          const { data: res } = await this.$http.get(`api/delproduct/${id}`);
          if (res.status != 0)
            return this.$notify({ type: "danger", message: "删除失败" });
          this.$notify({ type: "success", message: "删除成功" });
          this.onSearch();
        });
    },
    searchClick(data) {
      this.value = data;
      this.onSearch();
    }
  },
  created() {
    this.getSearchText();
    this.$store.commit("getCarNum");
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background: #1989fa;
  height: 50px;
  line-height: 50px;
  &__title,
  &__text,
  &__arrow {
    color: #fff !important;
  }
}
.van-tag {
  margin-left: 18px;
}
.title {
  margin: 18px;
  display: flex;
  justify-content: space-between;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transform: translateY(100px);
}

.block {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.van-swipe-cell {
  .van-button {
    width: 100% !important;
  }
}
</style>
